<script>
    // 初始化layui组件
    layui.use(['table', 'form', 'layer', 'jquery'], function() {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.jquery;
        
        // 存储记账记录数据
        var accountData = [];
        // 存储用户数据
        var userData = [];
        // 存储分类数据
        var categoryData = [];
        
        /**
         * 渲染表格 - 使用JavaScript DOM API
         */
        function renderTable(data) {
            var tableBody = document.getElementById('accountTableBody');
            tableBody.innerHTML = '';
            
            if (!data || data.length === 0) {
                var emptyRow = document.createElement('tr');
                emptyRow.innerHTML = '<td colspan="7" style="text-align: center;">暂无数据</td>';
                tableBody.appendChild(emptyRow);
                return;
            }
            
            data.forEach(function(item) {
                var row = document.createElement('tr');
                
                // 记录ID
                var aidCell = document.createElement('td');
                aidCell.textContent = item.aid;
                row.appendChild(aidCell);
                
                // 用户
                var uidCell = document.createElement('td');
                uidCell.textContent = item.uid && item.uid.username ? item.uid.username : '';
                row.appendChild(uidCell);
                
                // 金额
                var amountCell = document.createElement('td');
                var amountSpan = document.createElement('span');
                amountSpan.textContent = item.amount;
                amountSpan.className = item.a_type === 1 ? 'amount-income' : 'amount-expense';
                amountCell.appendChild(amountSpan);
                row.appendChild(amountCell);
                
                // 分类
                var categoryCell = document.createElement('td');
                categoryCell.textContent = item.category && item.category.name ? item.category.name : '';
                row.appendChild(categoryCell);
                
                // 描述 - 添加溢出防护
                var descCell = document.createElement('td');
                descCell.className = 'overflow-ellipsis';
                descCell.textContent = item.description || '';
                descCell.title = item.description || ''; // 添加title属性显示完整内容
                row.appendChild(descCell);
                
                // 类型
                var typeCell = document.createElement('td');
                typeCell.textContent = item.a_type === 1 ? '收入' : '支出';
                row.appendChild(typeCell);
                
                // 操作
                var actionCell = document.createElement('td');
                actionCell.style.textAlign = 'center';
                actionCell.className = 'action-buttons';
                
                var editBtn = document.createElement('a');
                editBtn.className = 'layui-btn layui-btn-xs';
                editBtn.textContent = '编辑';
                editBtn.setAttribute('data-aid', item.aid);
                editBtn.addEventListener('click', function() {
                    handleEdit(item);
                });
                
                var deleteBtn = document.createElement('a');
                deleteBtn.className = 'layui-btn layui-btn-danger layui-btn-xs';
                deleteBtn.textContent = '删除';
                deleteBtn.setAttribute('data-aid', item.aid);
                deleteBtn.addEventListener('click', function() {
                    layer.confirm('确定要删除这条记账记录吗？', {
                        btn: ['确定', '取消']
                    }, function() {
                        deleteAccount(item.aid);
                        layer.closeAll('dialog');
                    });
                });
                
                // 图片按钮
                var imageBtn = document.createElement('a');
                imageBtn.className = 'layui-btn layui-btn-warm layui-btn-xs';
                imageBtn.textContent = '图片';
                imageBtn.setAttribute('data-aid', item.aid);
                imageBtn.addEventListener('click', function() {
                    showImageDetailModal(item.aid, item);
                });
                
                actionCell.appendChild(editBtn);
                actionCell.appendChild(imageBtn);
                actionCell.appendChild(deleteBtn);
                row.appendChild(actionCell);
                
                tableBody.appendChild(row);
            });
        }
        
        // 初始渲染空表格
        renderTable([]);
        
        /**
         * 本地搜索功能
         */
        document.getElementById('accountSearch').addEventListener('input', function() {
            var keyword = this.value.toLowerCase();
            
            // 过滤数据
            var filteredData = accountData.filter(function(item) {
                return item.description.toLowerCase().indexOf(keyword) !== -1 ||
                       item.aid.toLowerCase().indexOf(keyword) !== -1;
            });
            
            // 重新渲染表格
            renderTable(filteredData);
        });
        
        /**
         * 刷新按钮点击事件
         */
        document.getElementById('refreshBtn').addEventListener('click', function() {
            loadAccountList();
            loadUserData();
            loadCategoryData();
            // 清空搜索框
            document.getElementById('accountSearch').value = '';
        });
        
        /**
         * 添加记账按钮点击事件
         */
        document.getElementById('addAccountBtn').addEventListener('click', function() {
            // 清空表单
            document.getElementById('editAid').value = '';
            document.getElementById('editAmount').value = '';
            document.getElementById('editDescription').value = '';
            
            // 打开弹窗
            layer.open({
                type: 1,
                title: '添加记账',
                content: $('#editAccountModal'),
                area: ['500px', '450px'], // 增加高度以适应文本域
                success: function() {
                    // 重新渲染表单以确保样式正确
                    form.render();
                }
            });
        });
        
        /**
         * 关闭编辑弹窗
         */
        document.getElementById('closeEditModal').addEventListener('click', function() {
            layer.closeAll('page');
        });
        
        /**
         * 处理编辑操作
         */
        function handleEdit(item) {
            document.getElementById('editAid').value = item.aid;
            document.getElementById('editUid').value = item.uid.uid;
            document.getElementById('editAmount').value = item.amount;
            document.getElementById('editCategory').value = item.category.cid;
            document.getElementById('editDescription').value = item.description;
            document.getElementById('editType').value = item.a_type;
            
            layer.open({
                type: 1,
                title: '编辑记账',
                content: $('#editAccountModal'),
                area: ['500px', '450px'], // 增加高度以适应文本域
                success: function() {
                    // 重新渲染表单以确保样式正确
                    form.render();
                }
            });
        }
        
        /**
         * 监听编辑表单提交
         */
        form.on('submit(editAccountSubmit)', function(data) {
            var aid = data.field.aid;
            var uid = data.field.uid;
            var amount = data.field.amount;
            var category = data.field.category;
            var description = data.field.description;
            var a_type = data.field.a_type;
            
            if (aid) {
                // 更新记账记录
                updateAccount(aid, uid, amount, category, description, a_type);
            } else {
                // 添加记账记录
                addAccount(uid, amount, category, description, a_type);
            }
            
            // 关闭弹窗
            layer.closeAll('page');
            
            return false;
        });
        
        /**
         * 加载记账记录列表（通过API）
         */
        function loadAccountList() {
            // 从全局window.user_info对象中获取当前用户的ID
            var currentUserId = window.user_info && window.user_info.uid ? window.user_info.uid : 'e0873ff1-ba5f-496c-95a7-40c8c8e7faca';
            
            axios.get('/api/account/list/', {
                params: {
                    uid: currentUserId
                }
            })
            .then(function(res) {
                // 根据API实际返回格式，成功状态码为0
                if (res.data.code === 0 && res.data.data) {
                        accountData = res.data.data;
                        // 重新渲染表格
                        renderTable(accountData);
                        
                        // 显示成功消息
                        if (res.data.message) {
                            layer.msg(res.data.message, {icon: 1, time: 1000});
                        }
                    } else {
                        layer.msg('获取记账记录失败：' + (res.data.message || '未知错误'), {icon: 2});
                        // 如果API调用失败，使用模拟数据
                        fallbackToMockData();
                    }
            })
            .catch(function() {
                layer.msg('网络错误，无法获取记账记录', {icon: 2});
                // 如果API调用失败，使用模拟数据
                fallbackToMockData();
            });
        }
        
        /**
         * 加载用户数据（通过API）
         */
        function loadUserData() {
            // 实际项目中应从用户管理API获取用户列表
            // 这里使用模拟数据
            fallbackToMockUserData();
        }
        
        /**
         * 加载分类数据（通过API）
         */
        function loadCategoryData() {
            // 从全局window.user_info对象中获取当前用户的ID
            var currentUserId = window.user_info && window.user_info.uid ? window.user_info.uid : 'e0873ff1-ba5f-496c-95a7-40c8c8e7faca';
            
            axios.get('/api/category/list/', {
                params: {
                    uid: currentUserId
                }
            })
            .then(function(res) {
                if (res.data.code === 0 && res.data.data) {
                    categoryData = res.data.data;
                    // 填充分类下拉框
                    fillCategorySelect();
                } else {
                    layer.msg('获取分类数据失败：' + (res.data.message || '未知错误'), {icon: 2});
                    // 如果API调用失败，使用模拟数据
                    fallbackToMockCategoryData();
                }
            })
            .catch(function() {
                layer.msg('网络错误，无法获取分类数据', {icon: 2});
                // 如果API调用失败，使用模拟数据
                fallbackToMockCategoryData();
            });
        }
        

        
        /**
         * 填充分类下拉框
         */
        function fillCategorySelect() {
            var categorySelect = document.getElementById('editCategory');
            categorySelect.innerHTML = '';
            
            categoryData.forEach(function(category) {
                var option = document.createElement('option');
                option.value = category.cid;
                option.textContent = category.name;
                categorySelect.appendChild(option);
            });
            
            // 重新渲染表单
            form.render('select');
        }
        
        /**
         * 添加记账记录（通过API）
         */
        function addAccount(uid, amount, category, description, a_type) {
            axios.post('/api/account/create/', {
                uid: uid,
                amount: amount,
                category: category,
                description: description,
                a_type: a_type
            })
            .then(function(res) {
                if (res.data.code === 0) {
                    layer.msg(res.data.message || '记账记录添加成功', {icon: 1});
                    // 重新加载记账记录列表
                    loadAccountList();
                } else {
                    layer.msg('添加记账记录失败：' + (res.data.message || '未知错误'), {icon: 2});
                }
            })
            .catch(function() {
                layer.msg('网络错误，无法添加记账记录', {icon: 2});
            });
        }
        
        /**
         * 更新记账记录（通过API）
         */
        function updateAccount(aid, uid, amount, category, description, a_type) {
            axios.post('/api/account/update/' + aid + '/', {
                uid: uid,
                amount: amount,
                category: category,
                description: description,
                a_type: a_type
            })
            .then(function(res) {
                if (res.data.code === 0) {
                    layer.msg(res.data.message || '记账记录更新成功', {icon: 1});
                    // 重新加载记账记录列表
                    loadAccountList();
                } else {
                    layer.msg('更新记账记录失败：' + (res.data.message || '未知错误'), {icon: 2});
                }
            })
            .catch(function() {
                layer.msg('网络错误，无法更新记账记录', {icon: 2});
            });
        }
        
        /**
         * 删除记账记录（通过API）
         */
        function deleteAccount(aid) {
            // 从全局window.user_info对象中获取当前用户的ID
            var currentUserId = window.user_info && window.user_info.uid ? window.user_info.uid : 'e0873ff1-ba5f-496c-95a7-40c8c8e7faca';
            
            axios.post('/api/account/delete/' + aid + '/', {
                uid: currentUserId
            })
            .then(function(res) {
                if (res.data.code === 0) {
                    layer.msg(res.data.message || '记账记录删除成功', {icon: 1});
                    // 重新加载记账记录列表
                    loadAccountList();
                } else {
                    layer.msg('删除记账记录失败：' + (res.data.message || '未知错误'), {icon: 2});
                }
            })
            .catch(function() {
                layer.msg('网络错误，无法删除记账记录', {icon: 2});
            });
        }
        
        /**
         * 当API调用失败时使用的模拟数据
         */
        function fallbackToMockData() {
            // 获取当前登录用户信息，如果不存在则使用默认值
            var currentUserName = window.user_info && window.user_info.username ? window.user_info.username : '李四';
            var currentUserId = window.user_info && window.user_info.uid ? window.user_info.uid : 'e0873ff1-ba5f-496c-95a7-40c8c8e7faca';
            
            accountData = [
                {
                    aid: '7d068b16-5f55-4787-83fd-c84697f4d2ab',
                    uid: {
                        uid: currentUserId,
                        username: currentUserName
                    },
                    amount: '100.50',
                    category: {
                        cid: '1',
                        name: '餐饮'
                    },
                    description: '午餐',
                    a_type: 2,
                    create_time: '2023-05-10T12:00:00',
                    update_time: '2023-05-10T12:00:00'
                },
                {
                    aid: '8e179c27-6g66-5898-94ge-d95708g5e3bc',
                    uid: {
                        uid: currentUserId,
                        username: currentUserName
                    },
                    amount: '5000.00',
                    category: {
                        cid: '2',
                        name: '工资'
                    },
                    description: '月工资',
                    a_type: 1,
                    create_time: '2023-05-01T09:00:00',
                    update_time: '2023-05-01T09:00:00'
                },
                {
                    aid: '9f280d38-7h77-6909-05hf-e06819h6f4cd',
                    uid: {
                        uid: currentUserId,
                        username: currentUserName
                    },
                    amount: '200.00',
                    category: {
                        cid: '3',
                        name: '交通'
                    },
                    description: '地铁充值',
                    a_type: 2,
                    create_time: '2023-05-08T10:00:00',
                    update_time: '2023-05-08T10:00:00'
                }
            ];
            
            renderTable(accountData);
        }
        
        /**
         * 当用户数据API调用失败时使用的模拟数据
         */
        function fallbackToMockUserData() {
            // 获取当前登录用户信息，如果不存在则使用默认值
            var currentUserName = window.user_info && window.user_info.username ? window.user_info.username : '李四';
            var currentUserId = window.user_info && window.user_info.uid ? window.user_info.uid : 'e0873ff1-ba5f-496c-95a7-40c8c8e7faca';
            
            userData = [
                {
                    uid: currentUserId,
                    username: currentUserName
                }
            ];
            
            // 填充用户下拉框
            var userSelect = document.getElementById('editUid');
            userSelect.innerHTML = '';
            
            userData.forEach(function(user) {
                var option = document.createElement('option');
                option.value = user.uid;
                option.textContent = user.username;
                userSelect.appendChild(option);
            });
            
            // 重新渲染表单
            form.render('select');
        }
        
        /**
         * 当分类数据API调用失败时使用的模拟数据
         */
        function fallbackToMockCategoryData() {
            categoryData = [
                {
                    cid: '1',
                    name: '餐饮'
                },
                {
                    cid: '2',
                    name: '工资'
                },
                {
                    cid: '3',
                    name: '交通'
                },
                {
                    cid: '4',
                    name: '购物'
                },
                {
                    cid: '5',
                    name: '娱乐'
                }
            ];
            
            fillCategorySelect();
        }
        
        // 页面加载时初始化数据
        loadAccountList();
        loadUserData();
        loadCategoryData();
    });
</script>